<!DOCTYPE html>
<html>
<head>
	<title>DOM操作</title>
</head>
<body>
	<fieldset>
		<legend>01.innerHTML与innetText的区别</legend>
		<p id="p-id">abc</p>
		<p>用innerHTML时要注意，是否需要写入HTML。如果写入的字符串是通过网络拿到了，要注意对字符编码来避免XSS攻击</p>
		<script type="text/javascript">
			//获取id为p-id的对象
			var p = document.getElementById("p-id");
			//设置文本
			p.innerHTML="123";
			//设置HTML
			p.innerHTML="<span>shen</span>";
			p.innerHTML='<script>alert("Hi")<\/script>';
		</script>
	</fieldset>
	<fieldset>
		<legend>02.innerHTML与innetText的区别</legend>
		<div id="div-id">div</div>
		<div>修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签</div>
		<script type="text/javascript">
			//获取id为div-pid的对象
			var oDiv = document.getElementById("div-id");
			//设置文本
			oDiv.innerText= "123";
			//设置html
			oDiv.innerText="<span>guang</span>";//这里的html原样输出
			oDiv.innerText='<script>alert("Hi")<\/script>';//这里的html原样输出
		</script>
	</fieldset>
</body>
</html>